<script setup>
import HomePanel from './HomePanel.vue';
import { getNewAPI } from '@/api/new';
import { nextTick, onMounted, ref } from 'vue';
const list = ref([])

onMounted(async () => {
    try {
        const newAPI = await getNewAPI();

        list.value = newAPI.result
        //console.log("New", list);
        await nextTick()
    } catch {

    }


})
</script>

<template>

    <HomePanel title="新鲜好物" subtitle="新鲜出炉 品质靠谱">
        <template #main>
            <div class="head-side">
                <ul>
                    <li v-for="item in list" :key="item.id">
                        <RouterLink :to="`/detail/${item.id}`"><img v-img-lazy="item.picture" alt=""
                                @load="item.loaded = true">
                            <p>{{ item.name }}</p>
                            <p>{{ item.price }}</p>
                        </RouterLink>
                    </li>
                </ul>
            </div>
        </template>
    </HomePanel>
</template>

<style scoped lang="scss">
* {
    width: 100%;
    margin: 0 auto;
}

.head-side {

    img {
        width: 200px;
        height: 200px;
    }

    ul {
        width: 100%;
        display: flex;
        justify-content: space-around;
    }

    li {
        text-align: center;

        p {
            font-size: 16px;
        }
    }
}
</style>